<template>
	<div class="home-grid">
		<van-grid :column-num="5" square :gutter="5">
			<van-grid-item v-for="list in menulist" :key="list">
				<van-image :src="list.url" />
				<span>{{ list.text }}</span>
			</van-grid-item>
		</van-grid>
	</div>
</template>

<script setup>
	import menu1 from '../assets/images/menu1.png'
	import menu2 from '../assets/images/menu2.png'
	import menu3 from '../assets/images/menu3.png'
	import menu4 from '../assets/images/menu4.png'
	import menu5 from '../assets/images/menu5.png'
	import menu6 from '../assets/images/menu6.png'
	import menu7 from '../assets/images/menu7.png'
	import menu8 from '../assets/images/menu8.png'
	import menu9 from '../assets/images/menu9.png'
	import menu10 from '../assets/images/menu10.png'
	
	const menulist = [
	  { text: '今日爆款', url: menu1 },
	  { text: '好物分享', url: menu2 },
	  { text: '推荐购买', url: menu3 },
	  { text: '购物心得', url: menu4 },
	  { text: '直播专区', url: menu5 },
	  { text: '签到中心', url: menu6 },
	  { text: '值得购买', url: menu7 },
	  { text: '每日优惠', url: menu8 },
	  { text: '充值中心', url: menu9 },
	  { text: '我的客服', url: menu10 }
	]
</script>

<style lang="less" scoped>
	.home-grid {
		.van-image {
			width: 55%;
		}

		span {
			font-size: 12px;
		}
	}
</style>